<template>
  <a-modal title="轮播图" :width="500" :visible="visible" @ok="submit" @cancel="cancelAdd">
    <a-form :form="form">
      <a-form-item label="名称">
        <a-input v-decorator="['name',{ rules: [{ required: true, message: '请输入名称' }] }]" placeholder="" />
      </a-form-item>
      <a-form-item label="备注">
        <a-input v-decorator="['title',{ rules: [{ required: true, message: '请输入备注' }] }]" placeholder="" />
      </a-form-item>
      <a-form-item label="有效时间">
        <a-range-picker show-time format="YYYY/MM/DD" :value="createValue" @change="onChangeTime"></a-range-picker>
      </a-form-item>
      <!-- [moment(start, 'YYYY/MM/DD'),moment(end, 'YYYY/MM/DD')] -->
      <a-form-item label="满多少可用">
        <a-input v-decorator="['fullprice',{ rules: [{ required: true, message: '请输入满多少可用' }] }]" placeholder="" />
      </a-form-item>
      <a-form-item label="减多少元">
        <a-input v-decorator="['price',{ rules: [{ required: true, message: '请输入减多少元' }] }]" placeholder="" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import {
    couponAdd,
    couponUpdate
  } from '@/api/coupon'
  import {
    getFormData
  } from '@/utils/aliOss/aliossUpload.js'
  import aliOssConfig from '@/utils/aliOss/config'
  const formItemLayout = {
    labelCol: {
      span: 4
    },
    wrapperCol: {
      span: 8
    },
  };
  const formTailLayout = {
    labelCol: {
      span: 4
    },
    wrapperCol: {
      span: 8,
      offset: 4
    },
  };

  export default {
    props: {
      visible: {
        type: Boolean,
        required: true,
      }
    },
    data() {
      return {
        checkNick: false,
        formItemLayout,
        formTailLayout,
        form: this.$form.createForm(this),
        loading: false,
        imageUrl: '',
        formData: {},
        aliOssConfig: aliOssConfig,
        id: 0,
        updateflag: false,
        inttime: '',
        endtime: '',
        createValue: []
      };
    },
    methods: {
      moment,
      onChangeTime(e) {
        if (e.length > 0) {
          this.inttime = Date.parse(e[0]._d) / 1000
          this.endtime = Date.parse(e[1]._d) / 1000
          this.createValue = [this.getDate(this.inttime), this.getDate(this.endtime)]
        }
      },
      cancelAdd() {
        this.updateflag = false
        this.$emit('cancel', true)
        this.form.resetFields()
        this.imageUrl = ''
      },
      getDate(stamp) {
        var date = new Date(stamp * 1000)
        return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? ('0' + (date.getMonth() + 1)) : date.getMonth() +
          1) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      },
      setUpdate(formValue) {
        var that = this
        this.updateflag = true
        this.id = formValue.id
        that.form.setFieldsValue({
          name: formValue.name,
          title: formValue.title,
          fullprice: formValue.fullprice,
          price: formValue.price
        })
        this.inttime = formValue.inttime
        this.endtime = formValue.endtime

        this.createValue = formValue.inttime == 0 ? [] : [this.getDate(formValue.inttime), this.getDate(formValue
          .endtime)]
      },
      submit() {
        var that = this
        const {
          form: {
            validateFields
          },
        } = this

        validateFields((errors, values) => {
          if (!errors) {
            values.inttime = parseInt(that.inttime);
            values.endtime = parseInt(that.endtime)
            values.fullprice = parseFloat(values.fullprice)
            values.price = parseFloat(values.price)
            if (this.updateflag) {
              values.id = this.id
              couponUpdate({
                ...values,
              }).then((res) => {
                if (res.code == 0) {
                  that.form.resetFields()
                  that.$emit('ok')
                }
              })
            } else {
              couponAdd({
                ...values,
              }).then((res) => {
                if (res.code == 0) {
                  that.form.resetFields()
                  that.$emit('ok')
                }
              })
            }
          }
        })
      },
      beforeUpload(file) {
        this.formData = getFormData()
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('请上传图片类型文件!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('图片最大体积为2MB!')
        }
        return isJpgOrPng && isLt2M
      },
      check() {
        this.form.validateFields(err => {
          if (!err) {
            console.info('success');
          }
        });
      },
      handleChange(info) {
        if (info.file.status === 'uploading') {
          this.loading = true
          return
        }
        console.log(info.file.status)
        if (info.file.status == 'done') {
          this.imageUrl = this.aliOssConfig.uploadUrl + '/' + this.formData.key
          console.log(this.imageUrl)
          this.loading = false
        }
      },
    },
  };
</script>